// SCSS Variables for ONVIF Manager

// Color palette
$primary-color: #409eff;
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$info-color: #909399;

// Background colors
$bg-color: #ffffff;
$bg-color-page: #f2f3f5;
$bg-color-overlay: #ffffff;

// Text colors
$text-color-primary: #303133;
$text-color-regular: #606266;
$text-color-secondary: #909399;
$text-color-placeholder: #a8abb2;
$text-color-disabled: #c0c4cc;

// Border colors
$border-color: #dcdfe6;
$border-color-light: #e4e7ed;
$border-color-lighter: #ebeef5;
$border-color-extra-light: #f2f6fc;
$border-color-dark: #d4d7de;
$border-color-darker: #cdd0d6;

// Fill colors
$fill-color: #f0f2f5;
$fill-color-light: #f5f7fa;
$fill-color-lighter: #fafafa;
$fill-color-extra-light: #fafcff;
$fill-color-dark: #ebedf0;
$fill-color-darker: #e6e8eb;
$fill-color-blank: #ffffff;

// Box shadow
$box-shadow-base:
  0 2px 4px rgba(0, 0, 0, 0.12),
  0 0 6px rgba(0, 0, 0, 0.04);
$box-shadow-dark:
  0 2px 4px rgba(0, 0, 0, 0.12),
  0 0 6px rgba(0, 0, 0, 0.12);
$box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

// Border radius
$border-radius-base: 4px;
$border-radius-small: 2px;
$border-radius-round: 20px;
$border-radius-circle: 100%;

// Font
$font-size-extra-large: 20px;
$font-size-large: 18px;
$font-size-medium: 16px;
$font-size-base: 14px;
$font-size-small: 13px;
$font-size-extra-small: 12px;

$font-family:
  'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑',
  Arial, sans-serif;

// Line height
$line-height-base: 1.5;

// Z-index
$z-index-normal: 1;
$z-index-top: 1000;
$z-index-popper: 2000;

// Spacing
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;

// Layout
$header-height: 60px;
$sidebar-width: 200px;
$sidebar-width-collapsed: 64px;

// Transition
$transition-duration: 0.3s;
$transition-function-ease-in-out-bezier: cubic-bezier(0.645, 0.045, 0.355, 1);
$transition-function-fast-bezier: cubic-bezier(0.23, 1, 0.32, 1);
$transition-all: all $transition-duration $transition-function-ease-in-out-bezier;
$transition-fade: opacity $transition-duration $transition-function-fast-bezier;
$transition-md-fade:
  transform $transition-duration $transition-function-fast-bezier,
  opacity $transition-duration $transition-function-fast-bezier;
$transition-border: border-color $transition-duration $transition-function-fast-bezier;
$transition-box-shadow: box-shadow $transition-duration $transition-function-fast-bezier;
$transition-color: color $transition-duration $transition-function-fast-bezier;

// Breakpoints
$sm: 768px;
$md: 992px;
$lg: 1200px;
$xl: 1920px;

// Component specific variables

// Card
$card-border-color: $border-color-light;
$card-border-radius: $border-radius-base;
$card-padding: 20px;

// Button
$button-border-radius: $border-radius-base;
$button-padding-vertical: 12px;
$button-padding-horizontal: 20px;

// Input
$input-border-color: $border-color;
$input-border-radius: $border-radius-base;
$input-padding-vertical: 12px;
$input-padding-horizontal: 15px;

// Table
$table-border-color: $border-color-lighter;
$table-header-bg-color: $fill-color-light;
$table-row-hover-bg-color: $fill-color-light;

// Video player
$video-player-bg: #000;
$video-control-bg: rgba(0, 0, 0, 0.7);
$video-control-color: #fff;

// Status colors
$status-online: $success-color;
$status-offline: $danger-color;
$status-unknown: $info-color;
$status-connecting: $warning-color;
